<template>
  <view>
    <map
        id="myMap"
        :latitude="lat"
        :longitude="lng"
        :markers="markers"
        :scale="10"
        style="width: 100%; height: 40vh;"
        @markertap="handleMarkerTap"
        @callouttap="callout_close"
        @poitap="getPoitap"
        enable-zoom="true"
    >
      <view slot="callout" v-if="!(callout_id==='')">
        <view class="customCallout" :marker-id="callout_id">
          <view class="ts-24 bg-w p-10 br-20" style="min-width: 200rpx;">
            <view class="ts-28 tb m-b-20">{{lists[callout_id].title}}</view>
            <view class="flex m-b-10">
              <view class="m-r-20 ts-22 p-lr-10 p-tb-3 tmb tc-w"
                    v-for="(val,idx) in $xyfun.tagsSplit(lists[callout_id].tags)" v-if="val">
                {{ val }}
              </view>
            </view>
            <view class="m-b-10">{{lists[callout_id].salary_text}}</view>
            <view class="m-b-10">{{lists[callout_id].salary_settlement}}</view>
            <view class="tm1b tc-w p-lr-10 p-tb-5 br-10 tc">查看详情</view>
          </view>
        </view>
      </view>
    </map>

    <view class="crumb">
      <view class="item" @tap="$xyfun.to('/pages/job/my_accept_job?status=1')">
        <view class="border-title"
              :style="'background-image:url('+$xyfun.image('/static/parttime/border.png')+')'">
          <text class="before before-y"></text>
          <text class="text">已接订单</text>
        </view>
      </view>
      <view class="item" @tap="$xyfun.to('/pages/job/my_accept_job?status=3')">
        <view class="border-title"
              :style="'background-image:url('+$xyfun.image('/static/parttime/border.png')+')'">
          <text class="before before-b"></text>
          <text class="text">已完成订单</text>
        </view>
      </view>
      <view class="item" @tap="$xyfun.to('/pages/teacher/apply')">
        <view class="border-title"
              :style="'background-image:url('+$xyfun.image('/static/parttime/border.png')+')'">
          <text class="before"></text>
          <text class="text">我的信息</text>
        </view>
      </view>
    </view>

    <block v-if="!isLoading">
      <view class="lists" v-if="!isEmpty">
        <view :class="callout_id===index?'item act':'item'" v-for="(item,index) in lists"
              @click="jobAct(item,index)">
          <view class="flex just-sb">
            <view>{{ item.demand }}</view>
            <view class="tc-r">{{ item.grade }}{{ item.subject}}</view>
          </view>
          <view class="flex f-nowrap just-sb fx-grow m-t-20">
            <view class="ts-24 tc-777">
              <view>首次试课：{{item.learn_date}} {{item.learn_time}} {{item.can_discuss==1?'可另议':''}}</view>
              <view>性别要求：{{item.sex}}</view>
              <view>学生情况：{{item.state}}</view>
            </view>
            <image class="rightnow" @click.stop="$xyfun.to('/pages/job/staff_accept_pay?id='+item.id)" src="/static/images/rightnow.png"></image>
          </view>
          <view class="flex just-sb m-t-20">
            <view class="flex ts-22 tc-999 m-t-20" style="max-width: 500rpx;overflow: hidden">
              <view v-if="item.distance">{{item.distance}}km<text class="m-lr-20">|</text></view>
              <view class="">{{item.addr_text[0]}}</view>
            </view>
            <view class="view_detail" @click.stop="$xyfun.to('/pages/job/job_detail?id='+item.id)">查看详情</view>
          </view>
        </view>
      </view>
      <view v-else>
        <xy-empty text="暂无数据" />
      </view>
    </block>

  </view>
</template>

<script>
import { mapState } from 'vuex';
import xyEmpty from "@/components/xy-empty/index.vue";
import xyTitle from "@/components/xy-title/index.vue";

export default {
  components: {xyTitle, xyEmpty},
  data() {
    return {
      isLoading: true,
      lat : 0,
      lng : 0,
      addr : '',

      isEmpty: true,
      lists: [],
      currentPage: 1,
      lastPage: 1,
      loadStatus: 'loadmore',

      markers: [],
      callout_id: '',

    };
  },
  computed: {
    ...mapState(['common','user'])
  },

  async onLoad() {
    let localInfo =  this.$xyfun.getLatLng();
    this.lat = localInfo.lat;
    this.lng = localInfo.lng;
    if(!localInfo.default){//使用的是确切的用户地址
      this.loadData();
    }
  },
  onPullDownRefresh() {
    this.currentPage = 1;
    this.lists = [];
    this.loadData();
  },
  onReachBottom() {
    if (this.currentPage < this.lastPage) {
      this.currentPage += 1;
      this.loadData();
    }
  },
  methods: {
    //回调刷新位置
    refreshLatLng(lat,lng,addr){
      this.lat = lat;
      this.lng = lng;
      this.addr = addr;
      this.loadData();
    },

    async loadData() {
      this.$api.postBase({
        url: '/teacher_job/lists',
        loadingTip: '加载中...',
        data: {
          page: this.currentPage,
          lat : this.lat,
          lng : this.lng
        },
        success: res => {
          uni.stopPullDownRefresh();

          this.lists = [...this.lists, ...res.data];
          this.isEmpty = !this.lists.length;
          this.currentPage = res.current_page;
          this.lastPage = res.last_page;
          this.loadStatus = this.currentPage < res.last_page ? 'loadmore' : 'nomore';
          this.markers = this.$xyfun.point_draw(this.lists);
          this.isLoading = false;
        }
      });
    },

    //点击地图上某个工作，显示出冒泡，并且以此居中
    handleMarkerTap(e) {
      if(!e.detail.markerId==999){
        this.callout_id = e.detail.markerId;
      }
      this.lat = e.detail.latitude;
      this.lng = e.detail.longitude;
    },

    //点击地图的其他点关闭冒泡
    getPoitap(e){
      this.callout_id = '';
    },

    //点击冒泡查看工作详情
    callout_close(e){
      this.$xyfun.to('/pages/job/detail?id='+this.lists[e.detail.markerId].id)
    },

    //点击列表里的工作
    jobAct(item,index){
      this.lat = item.lat;
      this.lng = item.lng;
      this.callout_id = index;
    },


  }
}
</script>

<style lang="scss">
.crumb{
  margin-top: 50rpx;
  display: flex;
  .item{
    width: 50%;
    display: flex;
    justify-content: center;
    font-weight: bold;
    color: #000;
    .border-title{
      width: 200rpx;
      font-size: 24rpx;
      font-weight: normal;
      line-height: 60rpx;
      .before{
        margin-top: 20rpx;
      }
      .text{
        top: 0;
      }
    }
  }
}
.lists{
  .item{
    background: #fff;
    margin: 20rpx;
    border-radius: 10rpx;
    padding: 20rpx;
    border: 1rpx solid #888;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position-x: 400rpx;
    &.act{
      border: 6rpx solid #61e7e6;
    }
  }
}
.rightnow{
  width: 240rpx;
  height: 50rpx;
}
.view_detail{
  color: #4d4d4d;
  background: #dfdfdf;
  font-size: 24rpx;
  height: 50rpx;
  line-height: 50rpx;
  width: 120rpx;
  text-align: center;
  border-radius: 20rpx;
}

.border-title{
  width: 250rpx;
  background-size: 100%;
  height: 80rpx;
  font-size: 32rpx;
  font-weight: bold;
  line-height: 74rpx;
  background-repeat: no-repeat;
  position: relative;
}
.border-title .before{
  margin-top: 30rpx;
  display: block;
  width: 150rpx;
  height: 20rpx;
  background: linear-gradient(to right,#fe9224, rgba(254, 146, 36, 0.21), rgba(254, 146, 36, 0));
  float: right;
}
.border-title .before-r{
  background: linear-gradient(to right,#c45252, rgba(196, 82, 82, 0.21), rgba(196, 82, 82, 0));
}
.border-title .before-g{
  background: linear-gradient(to right,#99b495, rgba(153, 180, 149, 0.21), rgba(153, 180, 149, 0));
}
.border-title .before-b{
  background: linear-gradient(to right,#51cec6, rgba(81, 206, 198, 0.21), rgba(81, 206, 198, 0));
}
.border-title .before-y{
  background: linear-gradient(to right,#fed960, rgba(254, 217, 96, 0.21), rgba(254, 217, 96, 0));
}
.border-title .text{
  position: absolute;
  top: 3rpx;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: block;
  text-align: center;
  font-family: "custom_font";
}

</style>
